<template>
  <div class="write">
    <Nav></Nav>
    <div class="mavonEditor1">
      <div class="button_box">
        <div style="display: inline-block">
          <el-button @click="saveBlog(0)" type="primary"
          >暂时保存</el-button>
          <el-button @click="saveBlog(1)" type="success"
          >发布</el-button>
        </div>

        <div style="display: inline-block;float: right">
          文章类型：
          <el-select v-model="blogType" placeholder="请选择" style="width: 100px">
            <el-option key="原创" value="原创"></el-option>
            <el-option key="转载" value="转载"></el-option>
            <el-option key="翻译" value="翻译"></el-option>
          </el-select>
          所属专栏：
          <el-select v-model="blogClassify" placeholder="请选择" style="width: 100px">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="title">
          <div style="display: inline-block;width: 100px">
            <span>文章标题: </span>
          </div>
          <div style="display: inline-block;width: 800px">
            <el-input v-model="title" placeholder="请输入文章标题"></el-input>
          </div>

        </div>

      </div>
      <div class="writeArea">
        <mavonEditor1 ref="write"></mavonEditor1>
      </div>
    </div>
  </div>
</template>

<script>
  import Nav from '../../components/Nav'
  import mavonEditor1 from "@/components/mavonEditor1";
  import marked from 'marked'

  export default {
    name: "index",
    components:{
      Nav,
      mavonEditor1
    },
    mounted() {
      this.content=this.$refs.write.content;
      this.getBlogClassify();
    },
    data(){
      return{
        title:'',
        id:'',
        blogType:'',
        content:'',
        blogHtml:'',
        blogClassify:'',
        options: [],

      }
    },
    methods:{
      saveBlog(blogStatus){
        if(this.blogClassify===''){
          this.$message.warning("请先选择博客的分类专栏吧~")
          return ;
        }
        if(this.blogType===''){
          this.$message.warning("请先选择博客的分类专栏吧~")
          return ;
        }
        if(this.title===''){
          this.$message.warning("请先填写文章的标题吧~")
          return ;
        }
        this.content=this.$refs.write.content;
        this.blogHtml=marked(this.content)
        if(this.id===''){
          this.id=null;
        }

        this.$ajax.post(this.$config.url + "/ljblog/blog/saveOrUpdateBlog",{
          "id":this.id,
          "blogType":this.blogType,
          "blogClassify":this.blogClassify,
          "blogHtml":this.blogHtml,
          "title":this.title,
          "blogText":this.content,
          "acthor":"什么是快乐",
          "blogStatus":blogStatus,
        }).then(res=>{
          if (res.data.status === 200) {
            // this.id=res.data.data;

            this.$message.success("草稿已保存");
            // this.$store.dispatch("setAdmin",res.data.object);
            // this.$store.dispatch("setToken",res.data.token);

          } else {
            this.$message.error("出错了，保存失败")
          }
            }
        )
      },
      getBlogClassify(){
        this.$ajax.post(this.$config.url +"/ljblog/classify/getClassifyByPid",{
          "parentId":1
        }).then(res=>{
          this.options=res.data.list;
        })
      },
    },
  }
</script>

<style scoped lang="less">
.write{
  width: 100%;
  margin-top: 61px;
  height: 905px;

  .mavonEditor1{
    box-sizing: border-box;
    width: 100%;
    max-width: 1360px;
    padding: 30px 50px;
    /*height: 500px;*/
    margin: 0 auto;
    .button_box{
      padding: 20px 20px 10px 20px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 15px;

      .title{
        margin: 5px auto ;
        width: 1000px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
      }

    }
  }
  .writeArea{
    box-sizing: border-box;
    width: 100%;
    max-width: 1360px;
    padding: 5px 0px;
    /*height: 500px;*/
    margin: 0 auto;
  }

}

</style>